<template>
	<div class="main">
		<div class="wrap">
			<!-- 头 -->
			<div class="header">
				<img src="../../assets/images/logo.png" class="left">
				<div class="right">
					<h3>视力检测报告</h3>
					<p>{{schoolName}}</p>
				</div>
			</div>
			<!-- 信息 -->
			<ul class="info">
				<li>
					<span class="left">姓名：</span>
					<span>{{name}}</span>
				</li>
				<li style="width:40% ;">
					<span class="left">班级：</span>
					<span>{{className}}</span>
				</li>
				<li style="width:25% ;text-align: center;">
					<span class="left">性别：</span>
					<span>{{sex}}</span>
				</li>
			</ul>
			<ul class="info">
				<li style="width:75% ;">
					<span class="left">学号：</span>
					<span>{{edu}}</span>
				</li>
			</ul>
			<ul class="info">
				<li style="width:75% ;">
					<span class="left">生成时间：</span>
					<span>{{timer}}</span>
				</li>
			</ul>
			<!-- 检测结果 -->
			<div class="result">
				<div class="bar">检测结果</div>
				<div class="result_eye flex-h" style="padding: 10px 0;">
					<!-- 左 -->
					<div class="left">
						<i class="fa fa-eye"></i>
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>右眼视力</span>
								<span class="gray">{{right}}</span>
							</div>
						</div>
					</div>
					<!-- 中 -->
					<div class="middle">
						<div class="flex flex-between mb10">
							<span>瞳距</span>
							<span class="gray">{{tongju}}</span>
						</div>
						<div class="flex flex-between">
							<span>屈光参差</span>
							<span class="gray">{{qgcc}}</span>
						</div>
					</div>
					<!-- 右 -->
					<div class="left">
						<i class="fa fa-eye"></i>
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>左眼视力</span>
								<span class="gray">{{left}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 线 -->
				<div class="line"></div>
				<!-- 瞳孔大小 -->
				<div class="result_eye flex-h p2">
					<!-- 左 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>瞳孔大小</span>
								<span class="gray">{{rightSize}}</span>
							</div>
						</div>
					</div>
					<!-- 用不上 -->
					<div class="middle"></div>
					<!-- 右 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>瞳孔大小</span>
								<span class="gray">{{leftSize}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 垂直固视 -->
				<div class="result_eye flex-h p2">
					<!-- 左 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>垂直固视</span>
								<span class="gray">{{rightCz}}</span>
							</div>
						</div>
					</div>
					<!-- 用不上 -->
					<div class="middle"></div>
					<!-- 右 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>垂直固视</span>
								<span class="gray">{{leftCz}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 水平固视 -->
				<div class="result_eye flex-h p2">
					<!-- 左 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>水平固视</span>
								<span class="gray">{{rightSp}}</span>
							</div>
						</div>
					</div>
					<!-- 用不上 -->
					<div class="middle"></div>
					<!-- 右 -->
					<div class="left">
						<div style="width: 60%;margin: 6px auto 0 auto;">
							<div class="flex flex-between">
								<span>水平固视</span>
								<span class="gray">{{leftSp}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 表格 -->
				<div class="table">
					<div class="left">
						<div class="title">
							<span>等效球面度</span>
							<span class="gray">{{rightSame}}</span>
						</div>
						<ul class="tableHeader">
							<li>球面度</li>
							<li>柱面度</li>
							<li>轴位角</li>
						</ul>
						<ul class="tableHeader" style="border-top: 1px solid #eee;">
							<li class="gray">{{rightQiu}}</li>
							<li class="gray">{{rightZhu}}</li>
							<li class="gray">{{rightZhou}}</li>
						</ul>
					</div>
					<div class="left">
						<div class="title">
							<span>等效球面度</span>
							<span class="gray">{{leftSame}}</span>
						</div>
						<ul class="tableHeader">
							<li>球面度</li>
							<li>柱面度</li>
							<li>轴位角</li>
						</ul>
						<ul class="tableHeader" style="border-top: 1px solid #eee;">
							<li class="gray">{{leftQiu}}</li>
							<li class="gray">{{leftZhu}}</li>
							<li class="gray">{{leftZhou}}</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 分析报告 -->
			<div class="bar">分析报告</div>
			<div class="report">
				<div class="left">
					<ul class="item">
						<li></li>
						<li>R</li>
						<li>L</li>
					</ul>
					<ul class="item">
						<li>近视</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifJin_right == 1">
							<span v-else-if="ifJin_right == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifJin_left == 1">
							<span v-else-if="ifJin_left == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<ul class="item">
						<li>远视</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifYuan_right == 1">
							<span v-else-if="ifYuan_right == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifYuan_left == 1">
							<span v-else-if="ifYuan_left == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<ul class="item">
						<li>散光</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifSan_right == 1">
							<span v-else-if="ifSan_right == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifSan_left == 1">
							<span v-else-if="ifSan_left == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<!-- 斜视暂时不显示 -->
<!-- 					<ul class="item">
						<li>斜视</li>
						<li><img src="../../assets/images/icon/icon_yes.png"></li>
						<li><img src="../../assets/images/icon/icon_no.png"></li>
					</ul> -->
				</div>
				<div class="right">
					<ul class="item">
						<li style="visibility: hidden;">R</li>
						<li></li>
					</ul>
					<ul class="item">
						<li>瞳孔大小不对等</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifTong == 1">
							<span v-else-if="ifTong == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<ul class="item">
						<li>屈光参差</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifqgcc == 1">
							<span v-else-if="ifqgcc == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<ul class="item">
						<li>固视不对称</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifGushi == 1">
							<span v-else-if="ifGushi == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
					<ul class="item">
						<li>主观视力</li>
						<li>
							<img src="../../assets/images/icon/icon_yes.png" v-if="ifZhu == 1">
							<span v-else-if="ifZhu == '未检'">未检</span>
							<img src="../../assets/images/icon/icon_no.png" v-else>
						</li>
					</ul>
				</div>
			</div>
			<!-- 相关解释 -->
			<!-- <div class="state">
				<h3>相关解释：</h3>
				<p>1.主观视力是指学生通过“E”型视力表，主观意识判断而采集到的视力数据，具体请参考眼科医生最终诊断结果。</p>
				<p>2.报告中所描述的近视、远视、散光、斜视、屈光参差、瞳孔大小不对等、固视不对称等是指学生被动情况下，通过专业眼科仪器采集而来的数据。由于受环境、情绪、光线等因素的影响，可能与主观视力数据有误差，最终以眼科医生诊断结果为准。</p>
			</div> -->
			<!-- 结论 -->
			<div class="final">
				<div class="left">
					<p>
						<b>{{name}}</b>同学，在此次视力检测中，您的检测结果<span :class="{'green':rank == '正常','red':rank != '正常'}">{{rank}}</span>，
						<span v-if="rank == '正常'">继续保持喔！</span>
						<span v-else>希望你以后能多加注重眼睛视力的保护，多吃红萝卜和有机蔬菜，补充睡眠。加油喔！</span>
					</p>
				</div>
				<div class="right">
					<img src="../../assets/images/eye/normal.png" v-if="rank == '正常'">
					<img src="../../assets/images/eye/error.png" v-else>
				</div>
			</div>
			<!-- 法律免责 -->
			<div class="footer">
				<h3>备注</h3>
				<p>以上数据根据《教育部等八部门关于印发<综合防控儿童青少年近视实施方案>的通知》的规范执行，仅做规范筛查使用，不做医疗诊断使用。</p>
				<p>数据来源:“学壮壮”健康大数据中心，并具有最终解释权</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			//header
			name:"",
			edu:"",
			sex:"",
			schoolName:"",
			gradeName:"",
			className:"",
			timer:"",

			qgcc:"", //屈光参差
			tongju:"未检", //瞳距
			//视力
			left:"未检",
			right:"未检",
			//瞳孔大小
			leftSize:"未检",
			rightSize:"未检",
			//垂直固视
			leftCz:"未检",
			rightCz:"未检",
			//水平固视
			leftSp:"未检",
			rightSp:"未检",
			//等效球面度
			leftSame:"未检",
			rightSame:"未检",
			//球面度
			leftQiu:"未检",
			rightQiu:"未检",
			//柱面度
			leftZhu:"未检",
			rightZhu:"未检",
			//轴位角
			leftZhou:"未检",
			rightZhou:"未检",

			///////////分析报告
			//是否近视
			ifJin_left:"未检",
			ifJin_right:"未检",
			//是否远视
			ifYuan_left:"未检",
			ifYuan_right:"未检",
			//是否散光
			ifSan_left:"未检",
			ifSan_right:"未检",
			//瞳孔是否正常
			ifTong:"未检",
			//屈光参差是否正常
			ifqgcc:"未检",
			//固视是否正常
			ifGushi:"未检",
			//主观是否正常
			ifZhu:"未检",

			//综合评级
			rank:"",
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/student/vis',{
				params:{
					studentUid:this.common.getCookie('studentUid')?this.common.getCookie('studentUid'):this.$route.query.studentUid,
					collectionUid:this.common.getCookie('planId')?this.common.getCookie('planId'):this.$route.query.planId,
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					//主观视力
					if(res.data.data.vision){
						this.left = res.data.data.vision.lseVis?res.data.data.vision.lseVis + '°':'未检'; //左眼
						this.right = res.data.data.vision.rseVis?res.data.data.vision.rseVis + '°':'未检'; //右眼
						this.ifZhu = res.data.data.vision.vision;//主观视力是否正常
					}
					if(res.data.data.scStudent){
						this.name = res.data.data.scStudent.studentName; //姓名
						this.sex = res.data.data.scStudent.sex; //性别
						this.schoolName = res.data.data.scStudent.schoolName; //学校
						this.gradeName = res.data.data.scStudent.gradeName; //年级
						this.className = res.data.data.scStudent.className; //班级
						this.edu = res.data.data.scStudent.studentCode; //学籍号
						this.timer = res.data.data.scStudent.createTime; //时间
					}
					if(res.data.data.antimetropia){
						this.tongju = res.data.data.antimetropia.pd + 'mm'; //瞳距
						//瞳孔大小
						this.leftSize = res.data.data.antimetropia.lpupil;
						this.rightSize = res.data.data.antimetropia.rpupil;
						//垂直固视
						this.leftCz = res.data.data.antimetropia.lgazev + '°';
						this.rightCz = res.data.data.antimetropia.rgazev + '°';
						//水平固视
						this.leftSp = res.data.data.antimetropia.lgazeh + '°';
						this.rightSp = res.data.data.antimetropia.rgazeh + '°';
						//等效球面度
						this.leftSame = res.data.data.antimetropia.lseeFix + '°';
						this.rightSame = res.data.data.antimetropia.rseeFix + '°';
						//球面度
						this.leftQiu = res.data.data.antimetropia.lseFix + '°';
						this.rightQiu = res.data.data.antimetropia.rseFix + '°';
						//柱面度
						this.leftZhu = res.data.data.antimetropia.lclyFix + '°';
						this.rightZhu = res.data.data.antimetropia.rclyFix + '°';
						//轴位角
						this.leftZhou = res.data.data.antimetropia.laxisFix + '°';
						this.rightZhou = res.data.data.antimetropia.raxisFix + '°';
						//是否近视,0异常，1正常
						this.ifJin_left = res.data.data.antimetropia.lmyopia;
						this.ifJin_right = res.data.data.antimetropia.rmyopia;
						//是否远视
						this.ifYuan_left = res.data.data.antimetropia.lhyperopia;
						this.ifYuan_right = res.data.data.antimetropia.rhyperopia;
						//是否散光
						this.ifSan_left = res.data.data.antimetropia.lastigmatism;
						this.ifSan_right = res.data.data.antimetropia.rastigmatism;
						//瞳孔是否正常
						this.ifTong = res.data.data.antimetropia.pupil;
						//屈光参差是否正常
						this.ifqgcc = res.data.data.antimetropia.anti;
						//固视是否正常
						this.ifGushi = res.data.data.antimetropia.gazev;
						//屈光参差
						this.qgcc = res.data.data.antimetropia.antimetropia?res.data.data.antimetropia.antimetropia + '°':'未检';
					}
					//综合评级
					this.rank = res.data.data.status;
				}
			})
		},
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "视力检测报告";
	}
}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #fff;
		.wrap{
			padding: 15px;
		}
	}
	//头
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 15px;
		border-bottom: 2px solid #858585;
		.left{
			height: 0.4rem;
		}
		.right{
			text-align: right;
			h3{
				color: #000;
				font-weight: bold;
				font-size: 15px;
			}
			p{
				color: #999;
				font-size: 14px;
			}
		}
	}
	//信息
	.info{
		margin-top: 10px;
		display: flex;
		li{
			width: 33.3%;
			text-align: left;
			.left{
				color: #666;
			}
		}
	}
	//list
	.list{
		display: flex;
		flex-wrap: wrap;
		padding: 0.25rem 0;
		li{
			border-right: 1px solid #dedede;
			border-bottom: 1px solid #dedede;
			padding: 15px 0;
			width: 33.3%;
			text-align: center;
			box-sizing: border-box;
			.top{
				span{
					color: #606165;
					font-size: 18px;
					font-weight: bold;
				}
				i{
					font-size: 12px;
					margin-left: 4px;
				}
			}
			.middle{
				text-align: center;
				margin: 4px 0 10px 0;
				span{
					padding: 4px 8px;
					color: #fff;
					border-radius: 4px;
					font-size: 12px;
				}
			}
			.bottom{
				color: #666;
				font-size: 13px;
				span{
					margin: 0 4px;
				}
			}
		}
		li:nth-child(1){
			width: 33.3%;
		}
		li:nth-child(2){
			width: 33.3%;
		}
		li:nth-child(3){
			width: 33.3%;
			border-right: none;
		}
		li:nth-child(4){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(5){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(6){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(7){
			width: 25%;
			border-bottom: none;
			border-right: none;
		}
	}
	//标题
	.bar{
		width: 100%;
		padding: 6px 0;
		background-color: #B4B4B4;
		font-size: 13px;
		color: #383838;
		text-align: center;
		font-weight: bold;
	}
	//结果
	.result{
		padding: 10px 0;
		//眼睛
		.result_eye{
			display: flex;
			.left{
				width: 40%;
				text-align: center;
				font-size: 12px;
				.fa-eye{
					font-size: 30px;
				}
			}
			.middle{
				width: 30%;
				font-size: 12px;
			}
		}
		//瞳孔大小list
		.size{
			font-size: 12px;
			.left{
				width: 40%;
				text-align: center;
			}
		}
		//表格
		.table{
			display: flex;
			justify-content: space-between;
			margin-top: 6px;
			.left{
				width: 45%;
				border: 1px solid #eee;
				.title{
					background-color: #B4B4B4;
					color: #383838;
					font-size: 13px;
					text-align: center;
					padding: 5px 0;
					span{
						margin: 0 2px;
					}
				}
				.tableHeader{
					display: flex;
					font-size: 12px;
					li{
						width: 33.3%;
						text-align: center;
						padding: 4px 0;
						border-right: 1px solid #eee;
					}
					li:last-child{
						border:none;
					}
				}
			}
		}
	}
	//报表
	.report{
		display: flex;
		justify-content: space-between;
		.left{
			width: 45%;
			.item{
				display: flex;
				align-items: center;
				padding: 5px 0;
				li{
					width: 33.3%;
					text-align: center;
					font-size: 12px;
					img{
						display: inline;
						width: 0.15rem;
					}
				}
			}
		}
		.right{
			width: 45%;
			.item{
				display: flex;
				align-items: center;
				padding: 5px 0;
				li{

					font-size: 12px;
					img{
						display: inline;
						width: 0.15rem;
					}
				}
				li:nth-child(1){
					text-align: left;
					width: 70%;
				}
				li:nth-child(2){
					width: 30%;
					text-align: center;
				}
			}
		}
	}
	//相关解释
	.state{
		padding-top: 15px;
		padding-bottom: 10px;
		h3{
			font-size: 13px;
			margin-bottom: 4px;
		}
		p{
			font-size: 10px;
			color: #666;
			line-height: 15px;
			padding: 2px 0;
		}
	}
	// 结论
	.final{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		font-size: 12px;
		b{
			font-size: 13px;
			margin-right: 2px;
		}
		.left{
			width: 60%;
		}
		.right{
			width: 35%;
			img{
				display: inline;
				width: 100%;
			}
		}
	}
	//屁股
	.footer{
		padding: 15px 0;
		border-top: 1px solid #858585;
		h3{
			padding-bottom: 4px;
			font-size: 15px;
		}
		p{
			font-size: 12px;
			color: #666;
		}
	}
	.line{
		width: 100%;
		height: 1px;
		background-color: #dedede;
	}
	.yellow{color: #F3A649;}
	.bgyellow{background-color: #F3A649;}
	.green{color: #3EA841;}
	.bggreen{background-color: #3EA841;}
	.red{color: #ED513F;}
	.bgred{background-color: #ED513F;}
	.gray{
		color: #666;
	}
</style>
